<template>
    <div class="jdbj">
        <div class="title"></div>
        <div class="cnt">
            <div class="left">
                <div class="cir">街道办件分析<br/>（月累计）</div>
                <div class="echarts-box">
                    <v-chart :options="option" auto-resize />
                </div>
            </div>
            <div class="right">
                <div :class="['item', 'item' + (index + 1)]" v-for="(item,index) in list" :key="item.name">
                    <div class="circle" :style="{background: colorList[index % colorList.length]}"></div>
                    <div class="name">{{ item.name }}</div>
                    <div class="num">{{ item.value }}件</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "jdbj",
    props: {
        obj: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            colorList: ["#537fe3", "#50cd89", "#d3b859", "#8656e9", "#0fc6c2", "#d995d9", "#de855c", "#9fdb1d", "#94caeb", "#b5bdcb"]
        }
    },
    computed: {
        list(){
            let data = this.obj;
            let max = 0;
            for(let i in data){
                if(data[i] && data[i].length > max){
                    max = data[i].length;
                }
            }
            let list = new Array(max).fill({}).map((item, index) => {
                return {
                    name: data.matterName[index],
                    value: data.matterNum[index],
                }
            })
            return list
        },
        total(){
            return this.obj.matterNum.reduce((a,b) => {
                return a + b
            }, 0)
        },
        option() {
            let unit = "%";
            return {
                color: this.colorList,
                textStyle: {
                    fontFamily: 'Source Han Sans CN',
                },
                series: [
                    {
                        type: 'pie',
                        padAngle: 2,
                        labelLine: {
                            show: true,
                            length: 8,
                            length2: 0,
                        },
                        label: {
                            show: true,
                            color: "#fff",
                            fontSize: 12,
                            // formatter: (params) => {
                            // position: 'center',
                            formatter: (params) => {
                                return params.percent + "%"
                            },
                          overflow: "none",
                            // rich: {
                            //     value: {
                            //         fontSize: 28,
                            //         color: "#fff",
                            //     },
                            //     unit: {
                            //         color: "#e5e9ff",
                            //         fontSize: 20,
                            //     }
                            // }
                        },
                        minAngle: 2,
                        radius: ["43%", "57%"],
                        center: ['50%', '50%'],
                        data: this.list
                    }
                ]
            };
        },
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.jdbj{

}
.title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/right3.png") no-repeat;
    background-size: 100% 100%;
}
.cnt{
    display: flex;
    padding: 20px 8px 0 16px;
    height: 251px;
    .left{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 240px;
        height: 240px;
        background-size: 100% 100%;
        .cir{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            background: url("~@/assets/home/cirR3.png") no-repeat;
            background-size: 100% 100%;
            color: #ffffffde;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 12px;
            line-height: 20px;
        }
        .echarts-box{
            position: relative;
            width: 100%;
            height: 100%;
        }
    }
    .right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        //justify-content: space-between;
        margin-left: 16px;
        padding: 0 0;
        overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
        .item{
            display: flex;
            align-items: center;
            margin: 0.5px 1px;
            .circle{
                width: 8px;
                height: 8px;
                border-radius: 50%;
            }
            .name{
                width: 98px;
                color: #ffffff;
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
                margin: 0 6px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .num{
                color: #ffffff;
                font-family: "Source Han Sans CN";
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
            }
        }
    }
}
</style>